<template>
  <div>
    <el-table height="300" :data="motionList">
      <el-table-column prop="BodyName" label="BodyName"></el-table-column>
      <el-table-column prop="x" label="X"></el-table-column>
      <el-table-column prop="y" label="Y"></el-table-column>
      <el-table-column prop="z" label="Z"></el-table-column>
      <el-table-column prop="qw" label="Qw"></el-table-column>
      <el-table-column prop="qx" label="Qx"></el-table-column>
      <el-table-column prop="qy" label="Qy"></el-table-column>
      <el-table-column prop="qz" label="Qz"></el-table-column>
      <el-table-column prop="TimeStamp" label="Period"></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { useWsStore } from '@/stores/ws-module'
import { ref, watch, onBeforeMount, onBeforeUnmount, computed, onMounted } from 'vue'
import { initCapture } from '@/api/wsObj'

let motionList = ref([])
const wsStore = useWsStore()
const moWsObj = computed(() => wsStore['moveCapture'])
let wsObj = null
const initData = () => {
  motionList.value = moWsObj.value
}

watch(moWsObj, () => {
  initData()
})
onBeforeMount(() => {
  wsObj = initCapture()
})
onMounted(() => {
  initData()
})
onBeforeUnmount(() => {
  wsObj?.disconnect()
})
</script>

<style lang="scss" scoped>

</style>